<template>
  <ResponsiveGrid
    :rows="showRows"
    :item-min-width="showItemMinWidth"
    :gap="showGap"
    ref="gridLayoutRef"
  >
    <template #default="">
      <!-- 产品列表 -->
      <div
        v-for="product in displayedProducts"
        :key="product.id"
        class="product-item"
      >
        <h3>{{ product.name }}</h3>
        <p class="price">¥{{ product.price }}</p>
      </div>
    </template>
  </ResponsiveGrid>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import ResponsiveGrid from "./components/ResponsiveGrid.vue";

interface Product {
  id: number;
  name: string;
  price: number;
}

const gridLayoutRef = ref<InstanceType<typeof ResponsiveGrid> | null>(null);
const currentPage = ref(1); // 当前页码
const showRows = ref(3); // 显示行数
const showGap = ref(20); // 显示间隔
const showItemMinWidth = ref(240); //item最小宽度
const allProducts = ref<Product[]>([]);

// 计算当前显示的产品
const displayedProducts = computed(() => {
  const pageSize = gridLayoutRef.value?.pageSize || 15;
  const startIndex = (currentPage.value - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return allProducts.value.slice(startIndex, endIndex);
});

// 模拟产品数据
const generateProducts = (count: number): Product[] => {
  return Array.from({ length: count }, (_, i) => ({
    id: i + 1,
    name: `产品 ${i + 1}`,
    price: Math.floor(Math.random() * 1000) + 100,
  }));
};

onMounted(async () => {
  // 模拟获取数据
  allProducts.value = generateProducts(100);
});
</script>

<style scoped>
.product-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  background: rgb(106, 190, 247);
  color: #000000;
}
.product-item h3 {
  margin: 8px 0;
  font-size: 16px;
}

.price {
  font-weight: bold;
  font-size: 18px;
}
</style>
